<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优惠卷列表</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <link rel="stylesheet" href="/Public/Wap/coupon/css/base.css">
    <script type="text/javascript" src="/Public/Member/js/jquery.min.js"></script>




    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: '{$wxConfig.appId}', // 必填，公众号的唯一标识
                timestamp: {$wxConfig.timestamp}, // 必填，生成签名的时间戳
                nonceStr: '{$wxConfig.nonceStr}', // 必填，生成签名的随机串
                signature: '{$wxConfig.signature}',// 必填，签名，见附录1
                jsApiList: [
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });



		wx.ready(function(){


/*			wx.chooseCard({
			    shopId: '', // 门店Id
			    cardType: '', // 卡券类型
			    cardId: '', // 卡券Id

			    timestamp: {$cardConfig.timestamp}, // 卡券签名时间戳
			    nonceStr: '{$cardConfig.nonceStr}', // 卡券签名随机串
			    signType: '{$cardConfig.signType}', // 签名方式，默认'SHA1'
			    cardSign: '{$cardConfig.cardSign}', // 卡券签名
			    success: function (res) {
			        var cardList = res.cardList; // 用户选中的卡券列表信息
			        alert(cardList);
			    }
			});*/

/*wx.openCard({
    cardList: [{
        cardId: 'p6F-qjobFwffgaSS21p30pJQ6G3Y',
        code: ''
    }]// 需要打开的卡券列表
});*/

/*
//
    function onBridgeReadyold() { 
        $('.jinru').click(function(e) {
        WeixinJSBridge.invoke('openCardDetail', {
        "card_id": $(this).attr('data-val'),
        "card_ext": "{\"code\":\"\",\"openid\":\"\",\"timestamp\":\""+$(this).attr('data-time')+"\",\"signature\":\""+$(this).attr('data-sign')+"\"}"
        },
        function(res) {}); });
    }

*/


		WeixinJSBridge.invoke('openCardDetail', {
	        "card_id": '{$getCard.card_id}',
	        "card_ext": "{ \"code\":\"\",\"openid\":\"\",\"nonce_str\":\"{$getCard.nonce_str}\",\"timestamp\":\"{$getCard.timestamp}\",\"signature\":\"{$getCard.signature}\" }"
	        },function(res) {});



/*{\"code\":\"\",\"openid\":\"\",\"nonce_str\":\"{$getCard.nonce_str}\",\"timestamp\":\"{$getCard.timestamp}\",\"signature\":\"{$getCard.signature}\"}*/



		});


    </script>




    
	<style>
		.couponList{}
		.couponList ul{}
		/* .couponList ul li{ background: blue url('public/images/coupon.png') 0 0 no-repeat; -webkit-background-size: 100%;
		background-size: 100%;height: 10.1rem;} */
		.couponList ul li {margin-bottom: 1rem; position: relative;}
		.couponList ul li a{display: block;}
		.couponList ul li a img{width: 100%;}

		.couponList ul li.on{}

		.huise{display: none;}

		.couponList ul li .canuse{position: absolute; display: block; top: 0rem; right: 0rem;background: url('/Public/Wap/coupon/images/canuse.png') 0 0 no-repeat;width: 4rem;height: 4rem;background-size: 100%;}

		.gray>a>img {
		    -webkit-filter: grayscale(100%);
		    -moz-filter: grayscale(100%);
		    -ms-filter: grayscale(100%);
		    -o-filter: grayscale(100%);
		    filter: grayscale(100%);
		    filter: gray;
		    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
		}
		.couponList ul li.gray i{background: url('/Public/Wap/coupon/images/notcanuse.png') 0 0 no-repeat;background-size: 100%;}
	</style>
</head>
<body>
<include file='Coupon/nav'/>
	<div class="couponList">
		<ul>
			<li class="gray">
				<a href="{:U('Coupon/detail')}"><img class="huise" src="/Public/Wap/coupon/images/coupon.png" alt=""></a>
				<i class="canuse"></i>
			</li>
			<li>
				<a href="{:U('Coupon/detail')}"><img src="/Public/Wap/coupon/images/coupon.png" alt=""></a>
				<i class="canuse"></i>
			</li>
		</ul>
	</div>

<script>
	$(function(){
        function huise(a) {
            var b = document.createElement("canvas");
            var c = b.getContext("2d");
            var d = new Image;
            d.src = a;
            b.width = d.width;
            b.height = d.height;
            c.drawImage(d, 0, 0);
            var e = c.getImageData(0, 0, b.width, b.height);
            for (var f = 0; f < e.height; f++) {
                for (var g = 0; g < e.width; g++) {
                    var h = f * 4 * e.width + g * 4;
                    var i = (e.data[h] + e.data[h + 1] + e.data[h + 2]) / 3;
                    e.data[h] = i;
                    e.data[h + 1] = i;
                    e.data[h + 2] = i
                }
            }
            c.putImageData(e, 0, 0, 0, 0, e.width, e.height);
            return b.toDataURL()
        }
        setTimeout(function(){
        	$(".huise").each(function(){
				this.src = huise(this.src);
				$(this).show();
			});
        },10);
		
	});
</script>
</body>
</html>